<template>
  <div class="fillcontain">
    <head-top></head-top>
    <div class="table_container">
      <el-table
        :data="tableData"
        @expand="expand"
        :expand-row-keys="expendRow"
        :row-key="row => row.index"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>

              <el-form-item label="商品价格">
                <span>{{ props.row.month_sales}}</span>
              </el-form-item>

              <el-form-item label="商品介绍">
                <span>{{ props.row.description }}</span>
              </el-form-item>

              <el-form-item label="商品库存">
                <span>{{ props.row.rating }}</span>
              </el-form-item>

              <el-form-item label="商品图片">
                <img class="food-img" :src="props.row.image_path" alt />
                <!-- <span>{{ props.row.category_name }}</span> -->
              </el-form-item>

              <el-form-item label="商品分类">
                <span>{{ props.row.category_name }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"></el-table-column>
        <el-table-column label="商品介绍" prop="description"></el-table-column>
        <el-table-column label="库存量" prop="rating"></el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="20"
          layout="total, prev, pager, next"
          :total="count"
        ></el-pagination>
      </div>
      <el-dialog title="修改商品信息" v-model="dialogFormVisible">
        <el-form :model="selectTable">
          <el-form-item label="商品名称" label-width="100px">
            <el-input v-model="selectTable.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍" label-width="100px">
            <el-input v-model="selectTable.description"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" label-width="100px">
            <el-input v-model="selectTable.month_sales" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品库存" label-width="100px">
            <el-input v-model="selectTable.rating" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" label-width="100px">
            <el-select v-model="selectIndex" :placeholder="selectMenu.label" @change="handleSelect">
              <el-option
                v-for="item in menuOptions"
                :key="item.value"
                :label="item.label"
                :value="item.index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片" label-width="100px">
            <el-upload
              class="avatar-uploader"
              :action="baseUrl + '/v1/addimg/food'"
              :show-file-list="false"
              :on-success="handleServiceAvatarScucess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="selectTable.image_path" :src="selectTable.image_path" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- <el-row style="overflow: auto; text-align: center;">
	                <el-table
				    :data="specs"
				    style="margin-bottom: 20px;"
				    :row-class-name="tableRowClassName">
					    <el-table-column
					      prop="specs"
					      label="规格">
					    </el-table-column>
					    <el-table-column
					      prop="packing_fee"
					      label="包装费">
					    </el-table-column>
					    <el-table-column
					      prop="price"
					      label="价格">
					    </el-table-column>
					    <el-table-column label="操作" >
					    <template slot-scope="scope">
					        <el-button
					          size="small"
					          type="danger"
					          @click="deleteSpecs(scope.$index)">删除</el-button>
					    </template>
					    </el-table-column>
					</el-table>
					<el-button type="primary" @click="specsFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
        </el-row>-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateFood">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="添加规格" v-model="specsFormVisible">
        <el-form :rules="specsFormrules" :model="specsForm">
          <el-form-item label="规格" label-width="100px" prop="specs">
            <el-input v-model="specsForm.specs" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="包装费" label-width="100px">
            <el-input-number v-model="specsForm.packing_fee" :min="0" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="价格" label-width="100px">
            <el-input-number v-model="specsForm.price" :min="0" :max="10000"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="specsFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addspecs">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import { baseUrl, baseImgPath } from "@/config/env";
import {
  getFoods,
  getFoodsCount,
  getMenu,
  updateFood,
  deleteFood,
  getResturantDetail,
  getMenuById
} from "@/api/getData";
export default {
  data() {
    return {
      baseUrl,
      baseImgPath,
      restaurant_id: null,
      city: {},
      offset: 0,
      limit: 20,
      count: 0,
      tableData: [],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      menuOptions: [],
      selectMenu: {},
      selectIndex: null,
      specsForm: {
        specs: "",
        packing_fee: 0,
        price: 20
      },
      specsFormrules: {
        specs: [{ required: true, message: "请输入规格", trigger: "blur" }]
      },
      specsFormVisible: false,
      expendRow: []
    };
  },
  created() {
    this.restaurant_id = this.$route.query.restaurant_id;
    this.initData();
    this.getFoods();
  },
  //   computed: {
  //     specs: function() {
  //       let specs = [];
  //       if (this.selectTable.specfoods) {
  //         this.selectTable.specfoods.forEach(item => {
  //           specs.push({
  //             specs: item.specs_name,
  //             packing_fee: item.packing_fee,
  //             price: item.price
  //           });
  //         });
  //       }
  //       return specs;
  //     }
  //   },
  components: {
    headTop
  },
  methods: {
    async initData() {
      //const countData = await getFoods();

      //console.log(this.count)
      // if (countData.status == 1) {
      //     this.count = countData.count;
      // }else{
      //     throw new Error('获取数据失败');
      // }
      this.getFoods();
    },
    async getMenu() {
      this.menuOptions = [];
      try {
        // const menu = await getMenu({
        //   restaurant_id: this.selectTable.restaurant_id,
        //   allMenu: true
        // });
        const menu = [
          {
            name: "食品生鲜",
            id: 1
          },
          {
            name: "滋补保健",
            id: 3
          },
          {
            name: "地方特产",
            id: 4
          },
          {
            name: "畜牧产品",
            id: 5
          },
          {
            name: "种植农业",
            id: 6
          },
          {
            name: "渔业产品",
            id: 7
          }
        ];
        menu.forEach((item, index) => {
          this.menuOptions.push({
            label: item.name,
            value: item.id,
            index
          });
        });
        console.log(this.menuOptions);
      } catch (err) {
        console.log("获取商品种类失败", err);
      }
    },
    async getFoods() {
      const Foods = await getFoods();
      console.log(Foods.data);
      this.tableData = [];

      Foods.data.forEach((item, index) => {
        var a = {};
        a.name = item.productName;
        a.description = item.productDescription;
        a.index = index;
        a.rating = item.productStock;
        a.item_id = item.productId;
        a.image_path = item.productIcon;
        a.category_id = item.categoryId;
        a.month_sales = item.productPrice;
        if (item.productStatus == 0) {
          this.tableData.push(a);
        }
        this.count = this.tableData.length;
      });
      // Foods.forEach((item, index) => {
      //     const tableData = {};
      //     tableData.name = item.name;
      //     tableData.item_id = item.item_id;
      //     tableData.description = item.description;
      //     tableData.rating = item.rating;
      //     tableData.month_sales = item.month_sales;
      //     tableData.restaurant_id = item.restaurant_id;
      //     tableData.category_id = item.category_id;
      //     tableData.image_path = item.image_path;
      //     tableData.specfoods = item.specfoods;
      //     tableData.index = index;
      //     this.tableData.push(tableData);
      // })
    },
    tableRowClassName(row, index) {
      if (index === 1) {
        return "info-row";
      } else if (index === 3) {
        return "positive-row";
      }
      return "";
    },
    addspecs() {
      this.specs.push({ ...this.specsForm });
      this.specsForm.specs = "";
      this.specsForm.packing_fee = 0;
      this.specsForm.price = 20;
      this.specsFormVisible = false;
    },
    deleteSpecs(index) {
      this.specs.splice(index, 1);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.offset = (val - 1) * this.limit;
      this.getFoods();
    },
    expand(row, status) {
      if (status) {
        this.getSelectItemData(row);
      } else {
        const index = this.expendRow.indexOf(row.index);
        this.expendRow.splice(index, 1);
      }
    },
    handleEdit(row) {
      this.getSelectItemData(row, "edit");
      this.dialogFormVisible = true;
    },
    async getSelectItemData(row, type) {
      //const restaurant = await getResturantDetail(row.restaurant_id);
      const category = {};
      //category.name=123
      console.log(row);
      if (row.category_id == 1) {
        row.category_name = "食品生鲜";
      } else if (row.category_id == 3) {
         row.category_name = "滋补保健";
      } else if (row.category_id == 4) {
         row.category_name = "地方特产";
      } else if (row.category_id == 5) {
         row.category_name = "畜牧产品";
      } else if (row.category_id == 6) {
         row.category_name = "种植农业";
      } else if (row.category_id == 7) {
         row.category_name = "渔业产品";
      }
      this.selectTable = {
        ...row,

        category_name: category.name
      };

         this.selectMenu = { value: row.category_id, label: row.category_name };
      //this.tableData.splice(row.index, 1, { ...this.selectTable });
      //   this.$nextTick(() => {
      //     this.expendRow.push(row.index);
      //   });
      if (type == "edit") {
        this.getMenu();
      }
    },
    handleSelect(index) {
      this.selectIndex = index;
      this.selectMenu = this.menuOptions[index];
    },
    async handleDelete(index, row) {
      try {
        var d = {
          id: row.item_id
        };
        const res = await deleteFood(d);
        if (res.code == 200) {
          this.count--;
          this.$message({
            type: "success",
            message: "删除商品成功"
          });
          //this.tableData.splice(index, 1);
          this.getFoods();
        } else {
          throw new Error(res.message);
        }
      } catch (err) {
        this.$message({
          type: "error",
          message: err.message
        });
        console.log("删除商品失败");
      }
    },
    handleServiceAvatarScucess(res, file) {
      if (res.status == 1) {
        this.selectTable.image_path = res.image_path;
      } else {
        this.$message.error("上传图片失败！");
      }
    },
    beforeAvatarUpload(file) {
      const isRightType =
        file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isRightType) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isRightType && isLt2M;
    },
    async updateFood() {
      this.dialogFormVisible = false;
      try {
        // const subData = {
        //   new_category_id: this.selectMenu.value,
        //   specs: this.specs
        // };
        const postData = { ...this.selectTable };
        console.log(postData);

        postData.price = postData.month_sales;
        delete postData.month_sales;

        postData.stock = postData.rating;
        delete postData.rating;

        postData.icon = postData.image_path;
        delete postData.image_path;

        postData.id = postData.item_id;
        delete postData.item_id;

        postData.category_id = this.selectMenu.value;

        const res = await updateFood(postData);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "更新商品信息成功"
          });
          this.getFoods();
        } else {
          this.$message({
            type: "error",
            message: res.message
          });
        }
      } catch (err) {
        console.log("更新餐馆信息失败", err);
      }
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.food-img {
  width: 80px;
  height: 80px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container {
  padding: 20px;
}
.Pagination {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
